<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-top-flow">

  <!-- navi wrap -->
  <div class="ddp-wrap-navi">
    <a href="javascript:" class="ddp-btn-back" (click)="onClickPermissionList()"></a>
    <!-- navi -->
    <div *ngIf="role.name" class="ddp-ui-naviarea">
      <!-- name -->
      <div class="ddp-box-navi ">
        <div class="ddp-wrap-naviname" >
          <span class="ddp-data-naviname ddp-readonly">{{getRoleName(role.name)}}</span>
        </div>
      </div>
      <!-- //name -->

      <!-- description -->
      <div class="ddp-box-navidet" [title]="getRoleDesc(role.name)">
        <div class="ddp-wrap-navidet">
          <span class="ddp-data-navidet ddp-readonly">{{getRoleDesc(role.name)}}</span>
        </div>
      </div>
      <!-- // description -->
    </div>
    <!-- //navi -->

  </div>
  <!-- //navi wrap -->


</div>

<!-- 상세 -->
<div class="ddp-wrap-datadetail">

  <div class="ddp-ui-datadetail">
    <label class="ddp-label-detail">{{'msg.comm.ui.info' | translate}}</label>
    <table *ngIf="role.name" class="ddp-table-detail">
      <colgroup>
        <col width="160px">
        <col width="*">
      </colgroup>
      <tbody>
      <tr>
        <th> {{'msg.comm.ui.name' | translate}} </th>
        <td> {{getRoleName(role.name)}} </td>
      </tr>
      <tr>
        <th> {{'msg.comm.ui.description' | translate}} </th>
        <td> {{getRoleDesc(role.name)}} </td>
      </tr>
      </tbody>
    </table>


    <!-- table detail -->
    <div class="ddp-wrap-table-detail">
      <div class="ddp-type-plan">
        <label class="ddp-label-detail">{{'msg.permission.th.users' | translate}}</label>
      </div>

      <table class="ddp-table-detail">
        <colgroup>
          <col width="160px">
          <col width="*">
        </colgroup>
        <tbody>
        <tr>
          <th>
            {{'msg.permission.th.members' | translate}} ({{ members.length}})
          </th>
          <td>
            <!-- dropdown -->
            <!-- 클릭시 ddp-selected 추가 -->
            <div class="ddp-ui-dropdown" [ngClass]="{'ddp-selected':isMembersDropdownOpen}">

              <div class="ddp-label-dropdown" *ngIf="members?.length > 1">

                <em class="ddp-icon-drop" (click)="openMembersDropdown()"></em>
                <div class="ddp-wrap-link-detail2">
                  <a href="javascript:" class="ddp-link-info">{{members[0]?.directoryName}}
                  </a>
                  <!-- popup -->
                  <user-information
                  [left]="true"
                  [name]="members[0]?.directoryName"
                  [id]="members[0]?.directoryId">
                  </user-information>
                  <!-- //popup -->
                </div>
                and
                <span class="ddp-data">{{members?.length-1}}</span>
                more members.
                <a href="javascript:" class="ddp-btn-option2" (click)="openEditPopup('members'); isMembersDropdownOpen = false"></a>
              </div>

              <div class="ddp-label-dropdown" *ngIf="members?.length === 1">
                <div class="ddp-wrap-link-detail2">
                  <a href="javascript:" class="ddp-link-info">{{members[0]?.directoryName}}
                  </a>
                  <!-- popup -->
                  <user-information
                    [left]="true"
                    [name]="members[0]?.directoryName"
                    [id]="members[0]?.directoryId">
                  </user-information>
                  <!-- //popup -->
                </div>

                <a href="javascript:" class="ddp-btn-option2" (click)="openEditPopup('members'); isMembersDropdownOpen = false"></a>

              </div>

              <div class="ddp-label-dropdown" *ngIf="members?.length === 0">
                <span class="ddp-no-data">{{'msg.permission.ui.no.mem' | translate}}</span>
                <a href="javascript:" class="ddp-btn-option2" (click)="openEditPopup('members'); isMembersDropdownOpen = false"></a>
              </div>

              <div class="ddp-det-dropdown">
                <!-- link detail -->
                <div class="ddp-wrap-link-detail2" *ngFor="let member of filteredMembers()">
                  <a href="javascript:" class="ddp-link-info">{{member.directoryName}}
                  </a>
                  <!-- popup -->
                  <user-information
                    [left]="true"
                    [name]="member.directoryName"
                    [id]="member.directoryId">
                  </user-information>
                  <!-- //popup -->
                </div>
                <!-- //link detail -->
              </div>

            </div>
            <!-- //dropdown -->

          </td>
        </tr>
        <tr>
          <th>
            {{'msg.permission.th.groups' | translate}} ({{groups.length}})
          </th>
          <td>
            <!-- dropdown -->
            <!-- 클릭시 ddp-selected 추가 -->
            <div class="ddp-ui-dropdown" [ngClass]="{'ddp-selected':isGroupsDropdownOpen}">
              <!-- 데이터가 1개 이상일 경우 -->
              <div class="ddp-label-dropdown" *ngIf="groups?.length > 1">

                <em class="ddp-icon-drop" (click)="openGroupsDropdown()"></em>
                <div class="ddp-wrap-link-detail2">
                  <a href="javascript:" class="ddp-link-info" (click)="onClickLinkGroup(groups[0].directoryId)">{{groups[0].directoryName}}
                  </a>
                </div>
                and
                <span class="ddp-data">{{groups?.length-1}}</span>
                more groups.
                <a href="javascript:" class="ddp-btn-option2" (click)="openEditPopup('groups'); isGroupsDropdownOpen = false"></a>
              </div>
              <!-- //데이터가 1개 이상일 경우 -->
              <!-- 데이터가 1개 일 경우 -->
              <div class="ddp-label-dropdown" *ngIf="groups?.length === 1">
                <div class="ddp-wrap-link-detail2">
                  <a href="javascript:" class="ddp-link-info" (click)="onClickLinkGroup(groups[0].directoryId)">{{groups[0].directoryName}}
                  </a>
                </div>
                <a href="javascript:" class="ddp-btn-option2" (click)="openEditPopup('groups'); isGroupsDropdownOpen = false"></a>

              </div>
              <!-- //데이터가 1개 일 경우 -->
              <!-- 데이터가 없을경우  -->
              <div class="ddp-label-dropdown" *ngIf="groups?.length === 0">
                <span class="ddp-no-data">{{'msg.permission.ui.no.group' | translate}}</span>
                <a href="javascript:" class="ddp-btn-option2" (click)="openEditPopup('groups'); isGroupsDropdownOpen = false"></a>
              </div>
              <!-- //데이터가 없을경우  -->
              <div class="ddp-det-dropdown">
                <div class="ddp-wrap-link-detail2" *ngFor="let group of filteredGroups()">
                  <a href="javascript:" class="ddp-link-info ddp-type" (click)="onClickLinkGroup(group.directoryId)">{{group.directoryName}}<em class="ddp-icon-window"></em>
                  </a>
                </div>
              </div>

            </div>
            <!-- //dropdown -->

          </td>
        </tr>

        </tbody>
      </table>

    </div>
    <!-- //table detail -->

  </div>
</div>
<!-- //상세 -->
<app-set-member-group-container [defaultTab]="defaultTab"
                                *ngIf="isSetMemberGroupOpen"
                                (cancelEvent)="closeSetMemberGroupPopup()"
                                [members]="simplifiedMemberList"
                                [groups]="simplifiedGroupList" [role]="role" (applyEvent)="updateDetail()">

</app-set-member-group-container>

